<template>
  <view class="setting">
    <view class="setting-top">
      <view class="setting-top-item">参与游戏人数: {{ playerNums }}</view>
      <view class="setting-top-item">参与抽奖人数: {{ awardsNums }}</view>
    </view>
    <view class="setting-tt">中奖名单：</view>
    <nut-list class="setting-list"  :height="40" :listData="list" @scroll-bottom="handleScroll">
      <template v-slot="{ item, index }">
        <view class="setting-list-item" :key="index">
          <view class="setting-avadar">
            <view class="setting-info">
              <view class="phone">
                {{ item.phone }}
              </view>
              <view class="createDate">{{ item.createDate }}</view>
            </view>
          </view>
          <nut-tag class="award" round type="primary">{{ item.award }}</nut-tag>
        </view>
      </template>
    </nut-list>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import { prizes } from '../../constants'

const list = ref([])
const playerNums = ref(0)
const awardsNums = ref(0)

onMounted(async () => {
  Taro.cloud.callFunction({
    name: 'getawards',
    success: res => {
      console.log(res);
      list.value = res.result.data
      Taro.hideLoading()
    },
    fail: err => {
      Taro.hideLoading()
    }
  })
  Taro.cloud.callFunction({
    name: 'getPlayers',
    data: {
      type: 1
    },
    success: res => {
      console.log(res);
      playerNums.value = res.result.total ?? 0
      Taro.hideLoading()
    },
    fail: err => {
      Taro.hideLoading()
    }
  })

  Taro.cloud.callFunction({
    name: 'getPlayers',
    data: {
      type: 2
    },
    success: res => {
      console.log(res);
      awardsNums.value = res.result.total ?? 0
      Taro.hideLoading()
    },
    fail: err => {
      Taro.hideLoading()
    }
  })
})

function handleScroll() {

}

</script>

<style lang="scss">
.setting {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/award_img_bg.jpeg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow-y: hidden;
}
.setting-list {
  margin-bottom: 9vh;
  overflow-y: auto;
  max-height: 70vh;
}

.setting-top {
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.setting-top-item {
  color: #666;
  font-size: 13px;
}

.setting-tt {
  padding-left: 20px;
}

.setting-avadar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.setting-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding-left: 20px;
  padding-right: 20px;
}
.setting-info {
  display: flex;
  flex-direction: column;
}
.setting-info .createDate {
  color: #666;
  font-size: 13px;
}
.setting-info .phone {
  font-size: 14px;
  color: #000;
  line-height: 20px;
}
</style>